<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>Document</title>
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>

    <style>
        *{
            margin: 0;
            padding:0;
        }
        .box{
            width:200px;
            height: 200px;
            background: brown;
        }
        .touch{
            width:100%;
            height:60vh;
            margin-top:70vh;
            background: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="box" class="box" onclick="clickme()"></div>
    <div class="touch"></div>
    <script>
        var box = document.getElementsByClassName("box")[0]
        box.onclick = function(){
            console.log("WH2107-daydayup")
        }
        function clickme(){
            console.log("clickme - clickme")
        }
        box.addEventListener("click",function(e){
            console.log(e)
        },false)

        var touch = document.getElementsByClassName("touch")[0];
        var startY = 0;
        var endY = 0;
        touch.addEventListener("touchstart",function(e){
            var e= e || window.event;
            console.log(e)
            var touches = e.touches[0]
            touch.innerHTML = `<p>clientX : ${touches.clientX}</p>`
                + `<p>clientY : ${touches.clientY}</p>`
                + `<p>pageX : ${touches.pageX}</p>`
                + `<p>pageY : ${touches.pageY}</p>`
                + `<p>screenX : ${touches.screenX}</p>`
                + `<p>screenY : ${touches.screenY}</p>`
                + `<p>scrollTop  : ${touches.pageY - touches.clientY}</p>`

                startY = touches.clientY;  
        },false)
        touch.addEventListener("touchmove",function(e){
            var e = e || window.event;
            // e.preventDefault();
            var touches = e.touches[0]
            console.log(touches)
            touch.innerHTML = `<p>clientX : ${touches.clientX}</p>`
                + `<p>clientY : ${touches.clientY}</p>`
                + `<p>pageX : ${touches.pageX}</p>`
                + `<p>pageY : ${touches.pageY}</p>`
                + `<p>screenX : ${touches.screenX}</p>`
                + `<p>screenY : ${touches.screenY}</p>`
                + `<p>scrollTop  : ${touches.pageY - touches.clientY}</p>`

                endY = touches.clientY;
        },false)
        touch.addEventListener("touchend",function(e){
            var e = e || window.event;
            console.log(e)
            console.log(e.changedTouches)  // 记录上一次的触摸对象 
            if(endY>startY){
                touch.innerHTML = "向下滑动 -- down"
            }else{
                touch.innerHTML = "向上滑动 -- up"
            }
        },false)

        // 可以绑定事件  但是不能获取到触摸对象信息 
        $(".touch").on('touchstart',function(e){
            console.log('jQuery - touchstart ')
            console.log(e)
        })



        var width = document.body.clientWidth || document.documentElement.clientWidth;
        console.log(width)
        console.log(window.devicePixelRatio)
    </script>
    <!-- 
        viewport 视口宽度    默认980  
        
        initial-scale=0.5  元素看起来缩写0.5  viewport 放大2 倍 
        initial-scale=2    元素看起来放大2    viewport 缩写 0.5 倍 

        淘宝适配  
        dpr 

        window.devicePixelRatio  设备像素密度比  


     -->
</body>
</html>